/<template>
  <div class="xq">
    <header class="header">
      <img
        src="https://images.sqfcw.com/attachment/build/20201201/b0cd0fbab7ab8f33193839d0abdeb38b00a7cd62.png"
        alt=""
      />
      <div class="box1">正在报名/已有256人报名</div>
    </header>
    <div class="cont">
      <div class="h1">逸品尚居</div>
      <div class="box2"> 活动时间:2020.11.1-2021.10.30</div>
      <div class="box3"> 活动地点: <span>YY找房</span> </div>
      <div>
          活动详情
      </div>
      <div>
        <img
          src="https://images.sqfcw.com/attachment/ue/20201105/939d31e828014cb004eae0990fd005e8d9ddf246.jpeg?x-oss-process=style/w_800"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped lang="scss">
.xq {
  width: 100%;

  .header {
    position: relative;
    width: 100%;
    img {
      width: 100%;
      height: 400rpx;
    }
    .box1 {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 10px;
    padding: 5px 10px;
    border-radius: 15px;
    background-image: -webkit-linear-gradient(left, #fbac65, #fb656a);
    background-image: linear-gradient(90deg, #fbac65, #fb656a);
    color: #fff;
    margin-bottom: 60rpx;
  }
  }
  .cont {
    width: 90%;
    margin: 0 auto;
    .box2{
        width: 100%;
        height: 70rpx;
        line-height: 70rpx;
        color: rgb(116, 111, 111);
    }
    .box3{
         width: 100%;
        height: 70rpx;
        line-height: 70rpx;
        >span{
            color: rgb(110, 107, 107);
        }
    }
    .h1 {
      font-size: 20px;
      line-height: 20rpx;
      font-weight: 700;
      line-height: 1.5;
      margin: 5rpx 0 12rpx;
      color: #fa6569;
      font-weight: 700;
    }
    img{
        width: 100%;
        height:7000rpx;
    }
  }
}
</style>